<template>
  <el-dialog
    top="30px"
    width="1100px"
    title="产品管理"
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-form @submit.native.prevent class="query-table-form" :inline="true">
      <el-form-item>
        <el-input
          v-model="params.load_name"
          placeholder="产品名称"
          clearable
          @change="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      ref="table"
      class="table-sm"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumModes as enumModeLimit } from '@/bank/views/business/index/LimitProduct'
import { enumModes as enumMode28 } from '@/bank/views/business/index/NormalProduct'

export default {
  components: {},
  props: {
    visible: Boolean,
  },
  data() {
    return {
      params: {
        index: 1,
        size: 15,
        load_name: '',
      },
      order: {
        create_time: 'DESC',
      },
      loading: false,
      totalCount: 0,
      tableData: [],
      tableColumns: [
        { attrs: { label: '产品名', prop: 'load_name' } },
        { attrs: { label: '业务模式', prop: 'channelTypeLabel' } },
        { attrs: { label: '适用对象', prop: 'load_entity' } },
        { attrs: { label: '担保额度（万元）', prop: 'load_amount' } },
        { attrs: { label: '担保年限', prop: 'loan_term' } },
        { attrs: { label: '担保费率', prop: 'gua_rate' } },
        { attrs: { label: '银行利率', prop: 'bank_rate' } },
      ],
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId']),
    queryAddressCode() {
      return this.user.queryAddressCode
    },
  },
  watch: {},
  created() {
    this.params['agency_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      this.loading = true
      this.$api
        .getData({
          table: 'industrial_package_agency_view',
          params: this.params,
          order: this.order,
        })
        .then(res => {
          this.tableData = (res?.data?.data ?? []).map(this.dataAdapter)
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      const guaType = +item.gua_type
      const enumMode = guaType === 3 ? enumModeLimit : enumMode28
      item.channelTypeLabel = enumMode[item.channel_type] || '-'
      return item
    },
  },
}
</script>

<style lang="scss" scoped></style>
